<template>
  <div class="banner">
    <div id="slided">
      <div
        v-bg-load="item.src"
        v-for="(item, index) in imgList"
        :key="item.name"
        class="itm"
        :style="{ left: index > 1 ? `calc(70% + ${index - 2} * 250px)` : 0 }"
      />
    </div>
    <el-row class="btn" justify="space-between" align="middle" style="height: calc(100vh - 60px)">
      <el-icon :size="30" @click="prev"><ArrowLeftBold /></el-icon>

      <el-icon :size="30" @click="next"><ArrowRightBold /></el-icon>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import { onMounted, onUnmounted } from "vue"

// 定义props类型
interface BannerItem {
  src: string
  name?: string
}

// 接收props
const props = withDefaults(defineProps<{
  bannerList?: BannerItem[]
}>(), {
  bannerList: () => []
})

const imgList = ref<BannerItem[]>([])

// 节流阀
const isChange = ref<boolean>(true)

// 下一张
const next = () => {
  // 暂停自动轮播
  clearInterval(timer.value)
  clearTimeout(delay.value)
  // 判断是否可以切换
  if (isChange.value && imgList.value.length > 0) {
    isChange.value = false
    const items = imgList.value.shift()
    if (items) {
      imgList.value.push(items)
    }
    setTimeout(() => {
      isChange.value = true
    }, 1000)
  }
  // 开启延时器，若一定时间内没有点击，则自动轮播
  delay.value = setTimeout(() => {
    autoPlay(5000)
  }, 10000)
}

// 上一张
const prev = () => {
  // 暂停自动轮播
  clearInterval(timer.value)
  clearTimeout(delay.value)
  if (isChange.value && imgList.value.length > 0) {
    isChange.value = false
    const items = imgList.value.pop()
    if (items) {
      imgList.value.unshift(items)
    }
    setTimeout(() => {
      isChange.value = true
    }, 1000)
  }
  // 开启延时器，若一定时间内没有点击，则自动轮播
  delay.value = setTimeout(() => {
    autoPlay(5000)
  }, 10000)
}

// 定时器
const timer = ref<any>(null)
// 延时器
const delay = ref<any>(null)

// 自动轮播
const autoPlay = (time: number) => {
  timer.value = setInterval(() => {
    if (imgList.value.length > 0) {
      const items = imgList.value.shift()
      if (items) {
        imgList.value.push(items)
      }
    }
  }, time)
}

// 监听props变化，更新imgList
watch(() => props.bannerList, (newList) => {
  if (newList && newList.length > 0) {
    imgList.value = [...newList]
    // 如果有数据就开始自动轮播
    autoPlay(5000)
  }
}, { immediate: true })

onMounted(() => {
  // 如果初始时就有数据，开始自动轮播
  if (props.bannerList && props.bannerList.length > 0) {
    imgList.value = [...props.bannerList]
    autoPlay(5000)
  }
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
.banner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  top: -60px;
  .itm {
    width: 240px;
    height: 160px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    border-radius: 10px;
    background-color: #fff;
    background-position: center;
    transition: 1s;
    box-shadow: 0 30px 50px #505050;
    background-repeat: no-repeat;
    background-size: cover;
    // z-index: 1;
    background-image: url(@/assets/picture/img-loading.gif);
  }
  .itm:nth-child(1),
  .itm:nth-child(2) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(0);
    box-shadow: none;
    border-radius: 0;
  }
  .itm:nth-child(n + 3) {
    top: 50%;
  }

  //   .itm:nth-child(3) {
  //     left: 70%;
  //   }
  //   .itm:nth-child(4) {
  //     left: calc(70% + 250px);
  //   }
  //   .itm:nth-child(5) {
  //     left: calc(70% + 500px);
  //   }
  //   .itm:nth-child(6) {
  //     left: calc(70% + 750px);
  //     opacity: 0;
  //   }
  .btn {
    &:hover {
      .el-icon {
        &:nth-child(1) {
          transform: translateX(0);
        }
        &:nth-child(2) {
          transform: translateX(0);
        }
      }
    }
  }
  .btn .el-icon {
    height: 100px;
    width: 50px;
    border-radius: 5px;
    margin: 0 25px;
    color: #fff;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    cursor:
      var(--cursor-pointer) 50 50,
      pointer !important;
    svg {
      cursor:
        var(--cursor-pointer) 50 50,
        pointer !important;
    }
    user-select: none;
    transition: all 0.5s;
    &:nth-child(1) {
      transform: translateX(-100px);
    }
    &:nth-child(2) {
      transform: translateX(100px);
    }
  }
}
</style>
